<template>
	<view>
		<cu-custom bgColor="headerBg" :isBack="true" textColor="text-white">
			<block slot="content">我的钱包</block>
		</cu-custom>
		<view class="app-header">
			<div class="background-gradient"></div>
			<view class="balance padding">
				<view class="content padding radius-xl bg-white padding-left-xl">
					<view class="text-black text-bold">当前可用</view>
					<view class="number padding-top-sm text-bold text-black">
						<view class="money">
							<text class="text-red">{{USERINFO.money}}</text>
						</view>
						<view class="right" @click="$utils.$page.open('/pages/user/wallet/log', true)">
							<text class="text-gray">账单</text>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="inc text-sm margin-top-sm">
						累计充值：<text class="text-red">{{USERINFO.money_sum}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="meal padding padding-top-0">
			<view class="list grid">
				<view class="item text-center" v-for="(item, index) in mealList" :key="index">
					<view class="light radius-xl" :class="form.id == item.id ? 'themeColor' : 'bg-white'"
						@tap="toSetMoney(item)">
						<view class="number text-xl text-bold">{{ item.money }}</view>
						<view class="griv" v-if="item.give_money>0">充{{ item.money }}送{{ item.give_money }}</view>
					</view>
				</view>
				<view class="item text-center">
					<view class="light radius-xl" :class="customRegister ? 'themeColor' : 'bg-white'"
						@tap="toCustomRegister">
						<view class="number text-xl text-bold">自定义充值</view>
					</view>
				</view>
			</view>
		</view>

		<view class="custom padding padding-top-0" v-show="customRegister">
			<view class="bg-white padding-sm radius-xl">
				<view class="margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>
					<text class="text-black">自定义充值</text>
				</view>
				<view class="crow bg-gray radius-lg">
					<input type="number" placeholder="请输入充值金额" v-model="form.money">
					<text>元</text>
				</view>
			</view>
		</view>

		<view class="tips padding text-sm padding-top-0">
			<view class="padding-bottom-xs text-gray">
				<text>{{WEBCONFIG.money_register_tips}}</text>
				<view class="text-sm text-gray">
					<text>请阅读</text>
					<text class="text-blue"
					@tap="$utils.$page.open('/pages/article/content?alias=recharge_notice')">《充值须知》</text>
					<text class="text-blue"
					@tap="$utils.$page.open('/pages/article/content?alias=pay')">《支付协议》</text>
				</view>
			</view>
		</view>
		<view class="submit padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg round shadow china-btn-bg" @click="submit()">确认充值</button>
		</view>
		<payType :show="payTypeShow" :orders-type="form.type" @payCallBack="payCallBack" :price="form.money" />

	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	data() {
		return {
			payTypeShow: false,
			customRegister: false,
			form: {
				id:'',
				type:'money',
				pay_type:'',
				platform:'',
				money: ''
			},
			wallet: [],
			mealList: []
		};
	},
	onLoad() {
		this.form.platform = this.$utils.$system.platform();
		this.getList();
	},
	methods: {
		getList() {
			this.$utils.$api.MoneyRegister.index().then(data=>{
				this.mealList = data;
			})
		},
		submit() {
			if(!this.form.id){
				const money_min_register=Number(this.WEBCONFIG.money_min_register);
				if(money_min_register&&this.form.money<money_min_register){
					return this.$utils.$message.error('最低充值'+this.WEBCONFIG.money_min_register+'元');
				}
				if (!this.form.money) {
					return this.$utils.$message.error('请输入充值金额');
				}
			}
			this.payTypeShow = true;
		},
		payCallBack(pay_type) {
			if (pay_type) {
				this.form.pay_type = pay_type;
				uni.showLoading({
					title: '获取订单中...',
					mask: true
				})
				this.$utils.$api.Orders.create(this.form).then(res=>{
					if (res.code === this.$utils.$http.ResponseCode.SUCCESS) {
						setTimeout(() => {
							uni.showLoading({
								title: '查询中...',
								mask: true
							});
							this.$utils.usePay(res.data).then(() => {
								this.form.money = '';
								this.customRegister = false;
								this.$utils.$api.User.userinfo(this, true);
							}).catch(err => {
								this.$utils.$message.error(err.msg);
							}).finally(() => {
								uni.hideLoading();
							});
						}, 300)
					} else if (res.code === this.$utils.$http.ResponseCode.PAY_SUCCESS) {
						this.form.money = '';
						this.customRegister = false;
						this.$utils.$api.User.userinfo(this, true);
					}
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				}).finally(() => {
					uni.hideLoading();
				})
			}
			this.payTypeShow = false;
		},
		toSetMoney(item) {
			this.customRegister=false;
			this.form.id=item.id;
			this.form.money = item.money;
		},
		toCustomRegister(){
			this.form.money='';
			this.form.id='';
			this.customRegister=true
		}
	}
}
</script>

<style lang="less" scoped>
.app-header {
	position: relative;
	overflow: hidden;

	.background-gradient {
		background-image: var(--header-bg-color);
		/* 渐变效果的颜色 */
		width: 100%;
		height: 230upx;
		/* 背景高度可根据需要进行调整 */
		border-bottom-left-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
		border-bottom-right-radius: 50% 50upx;
		/* 底部圆弧效果，可根据需求进行调整 */
	}

	.balance {
		margin-top: -170upx;

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.money {
				font-size: 50upx;
			}

		}
	}
}

.meal {
	.list {
    display: grid;
		gap: 10px;
		grid-template-columns: repeat(24, minmax(0px, 1fr));
		.item {
            grid-column: span 12 / span 12;
			.griv {
				font-size: 26upx;
			}
		}
	}
}

.custom {
	.crow {
		justify-content: space-between;
		padding: 15upx;

		input {
			font-size: 26upx;
		}
	}
}

.light {
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
